<template>
  <div id="list">
    <div></div>
    <el-card class="box-card">
      <div slot="header" class="setdiv">
        <span>商品列表</span>
        <el-button class="refreshRight" plain icon="el-icon-refresh" @click="shuaxin">刷新</el-button>
      </div>

      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="筛选查询" name="1">
          <div id="input1">
            关键词<el-input class="input" v-model="input" placeholder="商品名称/商品货架"></el-input>

            品牌 <el-select v-model="value" class="input" placeholder="请选择">
              <el-option v-for="item in brand" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
              </el-option>
            </el-select>
            是否上架<el-select v-model="value2" class="input" placeholder="请选择">
              <el-option v-for="item in sp_state" :key="item.value2" :label="item.label" :value="item.value2" :disabled="item.disabled">
              </el-option>
            </el-select>

          </div>
          <div id="anniu1">
            <el-button type="info" plain @click="chongzhi">重置</el-button>
            <el-button type="info" plain @click="shaixuan(value,value2)">筛选</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>

      <div id="shuju">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据列表</span>
          </div>
          <!-- 数据表格 -->
          <div id="card">
            <el-table :data="jiequ" :default-sort="{prop: 'xh', order: 'ascending'}" border height="400" style="width: 100%">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column fixed prop="id" label="序号" width="95">
              </el-table-column>
              <el-table-column prop="symj" label="供货商" width="180">
              </el-table-column>
              <el-table-column prop="name" label="商品名称" width="180">
              </el-table-column>
              <el-table-column prop="sphh" label="货号" width="180">
              </el-table-column>
              <el-table-column sortable prop="spjg" label="价格" width="120">
              </el-table-column>
              <el-table-column prop="fzzl" label="分类" width="120">
              </el-table-column>
              <el-table-column prop="zmpp" label="品牌" width="120">
              </el-table-column>
              <el-table-column prop="sfby" label="是否上架" width="120">
              </el-table-column>
              <el-table-column sortable prop="xssl" label="销量" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEdit(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <!-- 分页 -->
      <div id="fenye">
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" :page-size='5' :current-page.sync="nowPage">
          </el-pagination>
        </div>
      </div>
      <!-- 查看详情 -->
      <div>
        <el-dialog title="商品详情" :visible.sync="CheckDialogVisible" width="50%" :before-close="editClose">
          <!-- 查看详情表-->
          <el-form ref="editTableData" :model="editTableData" label-width="80px">

            <el-form-item prop="symj" label="供货商">
              <el-input v-model="editTableData.symj"></el-input>
            </el-form-item>
            <el-form-item prop="name" label="商品名称">
              <el-input v-model="editTableData.name"></el-input>
            </el-form-item>
            <el-form-item prop="sphh" label="货号">
              <el-input v-model="editTableData.sphh"></el-input>
            </el-form-item>
            <el-form-item prop="spjg" label="商品价格" width="150">
              <el-input v-model="editTableData.spjg"></el-input>
            </el-form-item>
            <el-form-item prop="fzzl" label="分类" width="150">
              <el-input v-model="editTableData.fzzl"></el-input>
            </el-form-item>
            <el-form-item prop="zmpp" label="品牌" width="200">
              <el-input v-model="editTableData.zmpp"></el-input>
            </el-form-item>
            <el-form-item prop="sfby" label="是否包邮" width="200">
              <el-input v-model="editTableData.sfby"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editClose(editTableData)">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<style scopd>
.anniu {
  height: 40px;
}
.refreshRight {
  position: absolute;
  right: 20px;
  top: 8px;
}
.el-collapse {
  padding-top: 20px;
}
.setdiv {
  background-color: #f2f2f2;
  padding: 17.5px 0;
  position: relative;
}
.setdiv > span {
  margin-left: 20px;
}
.input {
  width: 200px;
  margin-left: 20px;
  margin-right: 50px;
}
#anniu1 {
  text-align: center;
  margin-top: 40px;
}
#input1 {
  text-align: center;
}
#card {
  margin-top: 20px;
}
#shuju {
  margin-top: 10px;
}
#fenye {
  margin-top: 10px;
  text-align: center;
}
.el-collapse-item__header {
  padding-left: 18px;
  font-size: 16px;
  height: 56px;
  background-color: rgb(242, 242, 242);
}
</style>
  <script>
export default {
  data() {
    return {
      activeNames: ['1'],
      //查询内容
      input: '',
      //时间
      subtime: "",
      //品牌
      brand: [{
        value: '乔丹',
        label: '乔丹'
      }, {
        value: '李宁',
        label: '李宁'
      }, {
        value: '马克',
        label: '马克'
      },],
      value: '',
      //商品状态
      sp_state: [{
        value2: '已上架',
        label: '已上架'
      }, {
        value2: '未上架',
        label: '未上架'
      },],
      value2: '',
      CheckDialogVisible: false,//控制弹出框是否打开。
      //这个就是表单数据
      editTableData: {
      },
      //要渲染的数据
      tableData: [],
      //当前页
      nowPage: 1,
      //每页5条
      eachNum: '每页5条',

    }
  },
  created() {
    // this.getUserList();
    this.getOrdersList();
  },
  methods: {
    //几条渲染一页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      return this.eachNum = `每页 ${val} 条`
    },
    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

    },
    // 初始化获取所有数据
    getOrdersList() {
      this.$axios({
        url: "/goods/getallgoods",
        method: "get",
      }).then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data;
      });
    },
    //刷新
    shuaxin() {
      this.$message({
        message: "刷新成功",
        type: "success",
      });
      console.log(this);
      this.input = '';
      this.value = '';
      this.value2 = '';
      this.nowPage = 1;//当前页
      this.getOrdersList();

    },
    //重置按钮
    chongzhi() {
      this.input = '';
      this.value = '';
      this.value2 = '';
      this.getOrdersList();

    },
    //折叠
    handleChange(val) {
      console.log(val);
    },
    //点击确认，关闭弹出框。并改值
    editClose(data) {
      this.CheckDialogVisible = false;
      console.log(data),
        this.$axios({
          url: "/goods/changegoods",
          method: "post",
          data: data,
        }).then((res) => {
          console.log(res);

        });
    },
    //点击查看详情
    handleEdit(data) {
      this.CheckDialogVisible = true;
      console.log(data);
      this.editTableData = data;
      console.log(this.editTableData);
      // this.eidtTableData = { ...data };
    },

    shaixuan(pp, zt) {
      /* console.log(pp)
      console.log(zt) */
      let cx = [{ pp, zt }]
      console.log(cx)

      this.$axios({
        url: "/goods/sxuan/feippai",
        method: "post",
        data: cx,
      }).then((res) => {
        console.log(res);
        console.log(res.data)
        this.tableData = res.data.data;

      });
    }
  },
  computed: {
    //截取数据
    jiequ() {
      return this.tableData.slice(
        (this.nowPage - 1) * this.eachNum.replace(/[^0-9]/ig, ""),
        this.nowPage * this.eachNum.replace(/[^0-9]/ig, ""),
      );

    },
  },


}

</script>





